﻿<link href="~/Scripts/jquery-easyui-extensions/messager/jeasyui.extensions.messager.css" rel="stylesheet" />
<script src="~/Scripts/jquery-easyui-extensions/messager/jeasyui.extensions.messager.buttonsbox.js"></script>

<div class="easyui-panel" data-options="fit:true,border:false" style="padding:20px;">
    <span style="color:red;font-weight:bold;">注意，若要支持 在顶级window中使用 messager 扩展，那么需要先往顶级window页面添加 messager 扩展的引用，点此<a id="btnAppendMessagerJsToTop" class="easyui-linkbutton">点我</a>进行添加</span>
    <br />

    <div style="border:1px solid red;width:700px; height:150px;padding:15px;">
        <a id="btnButtonsbox1" class="easyui-linkbutton" data-options="iconCls:'icon-spider-man',toggle:true">在当前window中显示3个按钮的对话框，内容“开火，是否安装二向箔子弹？”</a>
        <br />

        <br />
        <br />
        <br />

        <a id="btnButtonsbox11" class="easyui-linkbutton" data-options="iconCls:'icon-spider-man',toggle:true">在顶级window中显示3个按钮的对话框，内容“开火，是否安装二向箔子弹？”</a>
        <br />
        <br />

        <span style="font-weight:bold;font-size:22px;margin:35px;">Buttonsbox 方式</span>
    </div>
</div>

<script>
    $(function () {
        var checkTopMessagerJs = function () {
            var topHead = top.$("head"),
                existHeadContent = topHead.html(),
                exist = $.string.contains(existHeadContent, "jeasyui.extensions.messager.buttonsbox.js");

            return exist;
        };

        var checkTopMessagerJsAndAlert = function () {
            if (!checkTopMessagerJs()) { alert("尚未在顶级window中添加对 messager 扩展的引用，请点击红字中的按钮添加引用。"); return false; }
            return true;
        };

        $("#btnAppendMessagerJsToTop").click(function () {
            if (checkTopMessagerJs()) {
                alert("已经添加 messager 扩展的引用，无需重复添加。");
            } else {
                var jsUrl = "/Scripts/jquery-easyui-extensions/messager/jeasyui.extensions.messager.buttonsbox.js";
                top.$.util.loadJs(jsUrl);
                alert("messager 扩展的引用添加成功。");
            }
        });

        $("#btnButtonsbox1").click(function () {
            var buttons = [
                { iconCls: "icon-ok", text: "是", value: "yes", plain: false },
                { iconCls: "icon-ok", text: "否", value: "no", plain: false },
                { iconCls: "icon-ok", text: "取消", value: "cancel", plain: false }
            ];

            $.messager.buttonsbox("毁灭太阳系", "开火，是否安装二向箔子弹？", buttons, function (index, value) {
                if (value == "cancel")
                { alert("你取消了开火"); }
                else if (value == "yes")
                { alert("太阳系遭受二向箔降维打击，正在毁灭"); }
                else
                { alert("太阳系遭受恒星级导弹攻击，重伤中"); }
            });
        });

        $("#btnButtonsbox11").click(function () {
            if (!checkTopMessagerJsAndAlert()) { return; }
            var buttons = [
                { iconCls: "icon-ok", text: "是", value: "yes", plain: false },
                { iconCls: "icon-ok", text: "否", value: "no", plain: false },
                { iconCls: "icon-ok", text: "取消", value: "cancel", plain: false }
            ];

            $.easyui.messager.buttonsbox("毁灭太阳系", "开火，是否安装二向箔子弹？", buttons, function (index, value) {
                if (value == "cancel")
                { alert("你取消了开火"); }
                else if (value == "yes")
                { alert("太阳系遭受二向箔降维打击，正在毁灭"); }
                else
                { alert("太阳系遭受恒星级导弹攻击，重伤中"); }
            });
        });

    });
</script>